<template>
  <div>
    <h1 class="m-v-30">事件处理</h1>
    <h3 class="m-v-10">监听事件</h3>
    <div>v-on:click='evemtName'===@click='eventName'</div>
    <h3 class="m-v-10">内敛事件处理器</h3>
    <div>
      内敛事件处理器通常用于简单的事件处理<button @click="count++">{{count}}</button>
    </div>
    <h3 class="m-v-10">方法事件处理器</h3>
    <div>
      内敛方法处理器不够灵活，<button @click="add">{{count}}</button>
    </div>

    <h3 class="m-v-10">在内敛处理器中调用方法</h3>
    <div>
      可以穿参数<button @click="add(5,'没有事件')">{{count}}</button>
    </div>

    <h3 class="m-v-10">在内敛事件处理中访问默认事件参数</h3>
    <div>
      $event事件<button @click="add(8,$event)"></button>
    </div>

    <h3 class="m-v-10">事件修饰符</h3>
    <div>
      1. .stop--阻止事件冒泡<br>
      2. .prevent---组织事件默认行为<br>
      3. .self---事件只作用于本身<br>
      4. .capture--事件捕获（指向内部元素的事件，在被内部元素处理前，先被外部处理）<br>
      5. .once--只处理一次<br>
      6. .passive---默认行为不等待，一般用于触摸事件监听器，可以用来改善移动端设备的滚屏性能

    </div>

    <h3 class="m-v-10">按键修饰符</h3>
    <div>
      1. @keyup.enter <br>
      2. @keyup.page-down <br>
      按键别名：.enter,.tab,.delete,.esc,.space,.up,.down,.left,.right
      系统按键修饰符：.ctrl,.alt,.shift,.meta
      鼠标按键修饰符： .left,.right,.middle
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

let count = ref(0)


function add(num = 1, e = '事件') {
  num ? count.value = count.value + num : count.value++
  console.log(e);
}
</script>

<style lang="scss" scoped>
</style>